.city__ss {
    position: absolute;
    left: 0;
    top: 0;
    width: 1280px;
    height: 720px;
}

/*****************/
/* ss home style */
/*****************/
.city__ss-home {
    position: absolute;
    width: 1280px;
    height: 720px;
}

/* ss-home head style */
.city__ss-hh {
    position: absolute;
    width: 1280px;
    height: 100px;
}

.city__ss-hh .title {
    position: absolute;
    left: 105px;
    bottom: 0;
    width: 180px;
    height: 40px;
    line-height: 40px;
    text-align: left;
    font-size: 26px;
    color: #9a9d9e;
    letter-spacing: 2px;
}

.city__ss-hh .update-time {
    position: absolute;
    right: 106px;
    bottom: 0;
    width: 380px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    font-size: 20px;
    color: #9a9d9e;
}

/* ss-home body style */
.city__ss-hb {
    position: absolute;
    top: 100px;
    width: 1280px;
    height: 470px;
}

.city__ss-hl {
    position: absolute;
    left: 50%;
    margin-left: -550px;
    top: 60px;
    width: 1100px;
    height: 400px;
}

.city__ss-hl-item {
    position: relative;
    float: left;
    width: 260px;
    height: 100%;
    margin: 0 7px;
}

.city__ss-hl-item > a {
    width: 250px;
    height: 390px;
    border: 5px solid transparent;
    border-radius: 10px;
}

.city__ss-hl-item > a:focus {
    border: solid 5px #46a7e7;
    box-shadow: #46a7e7 0 0 12px 1px;
}

.city__ss-hl-item:nth-child(1) > a {
    background: url(img/social-security/ss_1.png) center no-repeat;
}

.city__ss-hl-item:nth-child(2) > a {
    background: url(img/social-security/ss_2.png) center no-repeat;
}

.city__ss-hl-item:nth-child(3) > a {
    background: url(img/social-security/ss_3.png) center no-repeat;
}

.city__ss-hl-item:nth-child(4) > a {
    background: url(img/social-security/ss_4.png) center no-repeat;
}

.city__ss-hl-item .notice_1,
.city__ss-hl-item .notice_2 {
    position: absolute;
    top: 165px;
    width: 100%;
    height: 30px;
    line-height: 30px;
    text-align: center;
    font-size: 24px;
    color: #f0f0f0;
    letter-spacing: 2px;
}

.city__ss-hl-item .notice_2 {
    top: 115px;
}

.city__ss-hl-item .count {
    position: absolute;
    top: 95px;
    width: 100%;
    height: 50px;
    line-height: 50px;
    text-align: center;
    font-size: 33px;
    color: #f0f0f0;
    font-family: din_regularalternate, sans-serif;
    letter-spacing: 4px;
}

/* ss-home footer style */
.city__ss-hf {
    position: absolute;
    bottom: 0;
    width: 1280px;
    height: 150px;
}

.city__ss-hf .department,
.city__ss-hf .notice {
    position: absolute;
    left: 50%;
    margin-left: -190px;
    top: 20px;
    width: 380px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    font-size: 20px;
    color: #9a9d9e;
}

.city__ss-hf .notice {
    top: 65px;
}

/********************/
/* ss pension style */
/********************/
.city__ss-pension {
    position: absolute;
    width: 1280px;
    height: 720px;
}

/* ss pension-head style */
.city__ss-ph {
    position: absolute;
    margin-left: -10px;
    width: 1300px;
    height: 133px;
    background: rgba(255, 255, 255, .05);
    border-radius: 10px;
}

.city__ss-ph .separator {
    width: 1280px;
    left: 10px;
    margin-left: 0;
    bottom: 0;
}

.city__ss-ph .title,
.city__ss-ph .notice,
.city__ss-ph .count {
    position: absolute;
    top: 60px;
    height: 40px;
    line-height: 40px;
    text-align: left;
    font-size: 26px;
    color: #9a9d9e;
}

.city__ss-ph .title {
    width: 300px;
    left: 110px;
    letter-spacing: 2px;
}

.city__ss-ph .notice {
    width: 150px;
    right: 210px;
}

.city__ss-ph .count {
    top: 61px;
    width: 150px;
    right: 110px;
    font-size: 33px;
    text-align: right;
    font-family: din_regularalternate, sans-serif;
    letter-spacing: 2px;
}

/* ss pension-body style */
.city__ss-pb {
    position: absolute;
    top: 133px;
    width: 1280px;
    height: 510px;
}

.city__ss-pl {
    position: absolute;
    left: 50%;
    margin-left: -540px;
    width: 1080px;
    height: 100%;
}

.city__ss-pl-item {
    position: relative;
    width: 100%;
    height: 95px;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.city__ss-pl-item .title,
.city__ss-pl-item .value {
    position: absolute;
    width: 300px;
    height: 95px;
    line-height: 95px;
    font-size: 26px;
    color: #9a9d9e;
    letter-spacing: 2px;
}

.city__ss-pl-item .value {
    text-align: right;
    right: 0;
}

.city__ss-pl-item:nth-child(1) .value {
    font-size: 26px;
}

.city__ss-pl-item:nth-child(n+2) .value {
    font-size: 33px !important;
    font-family: din_regularalternate, sans-serif;
}

/* ss home-footer style */
.city__ss-pf {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 77px;
}

/********************/
/* ss medical style */
/********************/
.city__ss-medical {
    position: absolute;
    width: 1280px;
    height: 720px;
}

/* ss medical-head style */
.city__ss-mh {
    position: absolute;
    margin-left: -10px;
    width: 1300px;
    height: 133px;
    background: rgba(255, 255, 255, .05);
    border-radius: 10px;
}

.city__ss-mh .separator {
    width: 1280px;
    left: 10px;
    margin-left: 0;
    bottom: 0;
}

.city__ss-mh .title,
.city__ss-mh .time {
    position: absolute;
    top: 60px;
    height: 40px;
    line-height: 40px;
    color: #9a9d9e;
}

.city__ss-mh .title {
    width: 300px;
    left: 110px;
    text-align: left;
    font-size: 26px;
    letter-spacing: 2px;
}

.city__ss-mh .time {
    width: 250px;
    right: 280px;
    text-align: right;
    font-size: 20px;
    letter-spacing: 1px;
}

.city__ss-mh .filter {
    position: absolute;
    right: 110px;
    top: 55px;
    width: 145px;
    height: 45px;
    line-height: 45px;
    text-align: center;
    font-size: 20px;
    color: #9a9d9e;
    background: rgba(255, 255, 255, .1);
    border-radius: 10px;
}

.city__ss-mh a:focus.filter {
    color: #fff;
    background: #46a7e7;
}

/* ss medical-body style */
.city__ss-mb {
    position: absolute;
    top: 133px;
    width: 1280px;
    height: 510px;
}

.city__ss-ml {
    position: absolute;
    left: 50%;
    margin-left: -540px;
    width: 1080px;
    height: 100%;
}

.city__ss-ml-item {
    position: relative;
    width: 100%;
    height: 95px;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
}

.city__ss-ml-item .title,
.city__ss-ml-item .time,
.city__ss-ml-item .value {
    position: absolute;
    width: 150px;
    height: 95px;
    line-height: 95px;
    text-align: left;
    font-size: 26px;
    color: #9a9d9e;
}

.city__ss-ml-item .title-in {
    color: #40a03e;
}

.city__ss-ml-item .title-out {
    color: #e26d63;
}

.city__ss-ml-item .time {
    left: 150px;
    font-size: 20px;
    letter-spacing: 2px;
}

.city__ss-ml-item .value {
    text-align: right;
    right: 0;
    font-size: 33px;
    font-family: din_regularalternate, sans-serif;
    letter-spacing: 2px;
}

/* ss medical-footer style */
.city__ss-mf {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 77px;
}

/***********************/
/* ss retirement style */
/***********************/
.city__ss-retirement {
    position: absolute;
    width: 1280px;
    height: 720px;
}

/* ss retirement-head style */
.city__ss-rh {
    position: absolute;
    margin-left: -10px;
    width: 1300px;
    height: 133px;
    background: rgba(255, 255, 255, .05);
    border-radius: 10px;
}

.city__ss-rh .separator {
    width: 1280px;
    left: 10px;
    margin-left: 0;
    bottom: 0;
}

.city__ss-rh .title {
    position: absolute;
    left: 100px;
    top: 60px;
    width: 350px;
    height: 40px;
    text-align: left;
    font-size: 26px;
    line-height: 40px;
    color: #9a9d9e;
    letter-spacing: 2px;
}

/***********************/
/* ss retirement style */
/***********************/
.city__ss-retirement {
    position: absolute;
    width: 1280px;
    height: 720px;
}

/* ss unemployment-head style */
.city__ss-uh {
    position: absolute;
    margin-left: -10px;
    width: 1300px;
    height: 133px;
    background: rgba(255, 255, 255, .05);
    border-radius: 10px;
}

.city__ss-uh .separator {
    width: 1280px;
    left: 10px;
    margin-left: 0;
    bottom: 0;
}

.city__ss-uh .title {
    position: absolute;
    left: 100px;
    top: 60px;
    width: 350px;
    height: 40px;
    text-align: left;
    font-size: 26px;
    line-height: 40px;
    color: #9a9d9e;
    letter-spacing: 2px;
}

/*************************/
/* ss medical-mask style */
/*************************/
.city__ss-medical-mask .title {
    position: absolute;
    left: 50%;
    margin-left: -120px;
    top: 120px;
    width: 240px;
    height: 50px;
    line-height: 50px;
    text-align: center;
    font-size: 26px;
    color: #f0f0f0;
    letter-spacing: 2px;
}

.city__ss-medical-mask .separator {
    margin-left: -320px;
    top: 185px;
    width: 640px;
}

.city__ss-medical-mask .notice {
    position: absolute;
    left: 50%;
    margin-left: -210px;
    top: 635px;
    width: 420px;
    height: 35px;
    line-height: 35px;
    text-align: center;
    font-size: 20px;
    color: #9a9b9e;
}

.city__ss-medical-mask .content {
    position: absolute;
    left: 50%;
    margin-left: -320px;
    top: 185px;
    width: 640px;
    height: 300px;
}

.city__ss-medical-mask .left,
.city__ss-medical-mask .right {
    position: absolute;
    width: 280px;
    height: 100%;
}

.city__ss-medical-mask .right {
    right: 0;
}

.city__ss-medical-mask .lt {
    position: absolute;
    top: 55px;
    width: 140px;
    height: 40px;
    line-height: 40px;
    font-size: 24px;
    color: #9a9b9e;
}

.city__ss-medical-mask .ly,
.city__ss-medical-mask .lm {
    position: absolute;
    top: 135px;
    width: 40px;
    height: 40px;
    line-height: 40px;
    font-size: 26px;
    color: #d6d6d6;
}

.city__ss-medical-mask .ly {
    left: 128px;
}

.city__ss-medical-mask .lm {
    left: 244px;
}

.city__ss-medical-mask .iy,
.city__ss-medical-mask .im {
    position: absolute;
    top: 125px;
    height: 60px;
    line-height: normal;
    text-align: center;
    font-size: 33px;
    font-family: din_regularalternate, sans-serif;
    color: #d6d6d6;
    letter-spacing: 2px;
    background: none;
    border-radius: 10px;
    border: 2px solid rgba(255, 255, 255, .2);
}

.city__ss-medical-mask .iy:focus,
.city__ss-medical-mask .im:focus {
    color: #fff;
    border: 2px solid #46a7e7;
    box-shadow: #46a7e7 0 0 12px 1px;
}

.city__ss-medical-mask .iy {
    width: 113px;
}

.city__ss-medical-mask .im {
    left: 175px;
    width: 53px;
}

.city__ss-medical-mask #ss-mk5,
.city__ss-medical-mask #ss-mk6 {
    position: absolute;
    width: 125px;
    height: 46px;
    line-height: 46px;
    text-align: center;
    color: #9a9b9e;
    font-size: 24px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .1);
}

.city__ss-medical-mask #ss-mk5:focus,
.city__ss-medical-mask #ss-mk6:focus {
    color: #fff;
    background: #46a7e7;
}

.city__ss-medical-mask #ss-mk5 {
    right: 0;
    bottom: 10px;
}

.city__ss-medical-mask #ss-mk6 {
    left: 0;
    bottom: 10px;
}